import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import './chatRecord.css'
import { AtDivider, AtAvatar, AtListItem, AtButton } from "taro-ui"
import touxiang from '../../img/touxiang3.png'
import app from '../../main';


export default class Index extends Component {

    config = {
        navigationBarTitleText: ''
    }

    constructor () { 
        super(...arguments); 
        this.state = {
            chatArr:[],
        }
    }

    //跳转到评价页面
    gotoEvaluate(){
        app.redirectTo('../Evaluate/Evaluate?id='+ this.$router.params.id + '&doc_id=' + this.$router.params.doc_id)
    }

    //回到之前的页面
    gotodoctorsession(){
        app.redirectTo('../doctorsession/doctorsession?doc_id=' + this.$router.params.doc_id)
    }

    offset = 0    
    length = 20

    getmessage(){
        let me = this
        let data = {
            offset:this.offset,
            length:this.length,
            type:'问诊订单',
            relate_id: this.$router.params.id
        }
        app.get('web/instant_chat_record/many', data, function(res){
            console.log(res.data.result.list)
            let arr = res.data.result.list
            let chatArr = []
            for(let val of arr){
                let content = JSON.parse(val.content) 
                if(content !== null && val.sender_type == '患者'){
                    chatArr.push(content)
                }else if(content !== null && val.sender_type == '医生'){
                    content = {
                        type:content.type,
                        data:content.data,
                        send:1
                    }
                    chatArr.push(content)
                }
            }
            me.setState({
                chatArr:chatArr
            })
        })
    }

    setNavigationTitle() {
        var me = this;
        app.get('web/doctor/getById', {id: this.$router.params.doc_id}, function(res) {
            let name = res.data.result.name+'的咨询记录'
            Taro.setNavigationBarTitle({title: name});
        })
    }

    componentWillMount(){
        this.getmessage();
        this.setNavigationTitle();
    }

    render () {
        return (
            <View className='index'>
                <AtDivider className='divider'  content='本次咨询开始' fontColor='#8e8e8e' lineColor='#8e8e8e' />  
                <View className='time'> 2019-03-04 15:34 </View>

                <Form className='from'>
                    {
                        this.state.chatArr.map((item)=>{
                            if(item.type == 'text' && item.send == undefined){
                                return(
                                    <View className='textBox'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview'>
                                            <View className='text'>{item.data}</View>
                                        </View>
                                    </View>
                                )
                            }else if(item.type == 'image' && item.send == undefined){
                                return(
                                    <View className='textBox'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-c'>
                                            <Image mode='aspectFit' className='img-e' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }else if(item.type == 'photo' && item.send == undefined){
                                return(
                                    <View className='textBox'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-c'>
                                            <Image mode='aspectFit' className='img-e' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }else if(item.type == 'video' && item.send == undefined){
                                return(
                                    <View className='textBox'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-d'>
                                            <Video controls={true} className='video' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }else if(item.type == 'text' && item.send == 1){
                                return(
                                    <View className='textBoxs'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview'>
                                            <View className='text'>{item.data}</View>
                                        </View>
                                    </View>
                                )
                            }else if(item.type == 'image' && item.send == 1){
                                return(
                                    <View className='textBoxs'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-c'>
                                            <Image mode='aspectFit' className='img-e' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }else if(item.type == 'photo' && item.send == 1){
                                return(
                                    <View className='textBoxs'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-c'>
                                            <Image mode='aspectFit' className='img-e' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }else if(item.type == 'video' && item.send == 1){
                                return(
                                    <View className='textBoxs'>
                                        <AtAvatar className='avatar' image={touxiang} />       
                                        <View className='textview-d'>
                                            <Video controls={true} className='video' src={item.data} />
                                        </View>
                                    </View> 
                                )
                            }             
                        })
                    }
        </Form>   

                <View className='box-a'>
                    <AtDivider className='divider'  content='本次咨询结束' fontColor='#8e8e8e' lineColor='#8e8e8e' />   
                </View>
                
                <View className='btnctro' onClick={this.gotoEvaluate.bind(this)}>
                    <AtButton className='btn' type='primary' size='small'><View style='width:100px;' >去评价</View></AtButton>
                </View>

                <View class='emptybox'></View>
                <AtButton  className='greenbtn' type='primary' onClick={this.gotodoctorsession.bind(this)}>再次咨询</AtButton>


             </View>
        )
    }
}
